import React, { Component } from 'react'
import logo from 'assets/logo.png'
import { Card, Button, Checkbox, Form, Input, message } from 'antd';
import { login } from 'api/user'
import { setToken } from 'utils/useToken';
import style from './index.module.scss'

export default class Login extends Component {
    state = {
        loading: false
    }
    render() {
        return (
            <div className={style.login}>
                <Card className="loginContain">
                    <img src={logo} className="login-logo" />
                    <Form
                        size="large"
                        validateTrigger={["onChange", "onBlur"]}
                        onFinish={this.onFinish}
                        initialValues={{
                            mobile: "13911111111",
                            code: "246810",
                            agree: true
                        }}>
                        <Form.Item
                            name='mobile'
                            rules={[
                                {
                                    required: true,
                                    message: '手机号不能为空',
                                },
                                {
                                    pattern: /^1[3-9]\d{9}$/,
                                    validateTrigger: "onBlur",
                                    message: '请输入正确的手机号',
                                },
                            ]}>
                            <Input placeholder="请输入手机号" autoComplete="off" />
                        </Form.Item>

                        <Form.Item
                            name='code'
                            rules={[
                                {
                                    required: true,
                                    message: '验证码不能为空',
                                },
                                {
                                    pattern: /^\d{6}$/,
                                    validateTrigger: "onBlur",
                                    message: '请输入正确的验证码',
                                },
                            ]}>
                            <Input placeholder="请输入验证码" autoComplete="off" />
                        </Form.Item>

                        <Form.Item
                            name='agree'
                            valuePropName="checked"
                            rules={[
                                {
                                    validator: (rule, value) => {
                                        if (value) {
                                            return Promise.resolve();
                                        } else {
                                            return Promise.reject(new Error("请勾选隐私条款"));
                                        }
                                    }
                                },
                            ]}>
                            <Checkbox>我已阅读并同意隐私条款</Checkbox>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block loading={this.state.loading}>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        )
    }
    onFinish = async ({ mobile, code }) => {
        this.setState({
            loading: true
        })
        try {
            const res = await login(mobile, code)
            console.log(this.props)
            let { state } = this.props.location
            message.success('登录成功', 1, () => {
                setToken(res.data.token)
                if (state) {
                    this.props.history.push(state.from)
                } else {
                    this.props.history.push('/home')
                }
            });
        } catch (error) {
            message.warning(error.response.data.message, 1, () => {
                this.setState({
                    loading: false
                })
            });
        }
    }
}
